<template>
    <el-dialog title="Warning" width="50%" center>
      
      <el-form
        ref="emperorFormRef"
        :model="emperorForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="id" prop="id" v-model="showEl" v-if="showEl==true">
          <el-input/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="emperorForm.name" />
        </el-form-item>
        <el-form-item label="朝代" prop="dynasty">
          <el-input v-model="emperorForm.dynasty" />
        </el-form-item>
        <el-form-item label="庙号" prop="dynastyTitle">
          <el-input v-model="emperorForm.dynastyTitle" />
        </el-form-item>
        <el-form-item label="年号" prop="reignTitle">
          <el-input v-model="emperorForm.reignTitle" />
        </el-form-item>
        <el-form-item label="陵墓" prop="mausoleum">
          <el-input v-model="emperorForm.mausoleum" />
        </el-form-item>
        <el-form-item label="出生日期" prop="dateOfBirth">
          <el-input v-model="emperorForm.dateOfBirth" type="number"/>
        </el-form-item>
        <el-form-item label="死亡日期" prop="dateOfDeath">
          <el-input v-model="emperorForm.dateOfDeath" type="number"/>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="emperorForm.introduction" type="textarea"/>
        </el-form-item>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(emperorFormRef);">提交</el-button>
        <el-button @click="resetForm(emperorFormRef);">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref,reactive,toRefs,Ref } from "vue";
import axios from '@/request';
import { Emperor } from "@/type/Story";
import { FormInstance, FormRules,ElMessage,genFileId } from 'element-plus'
import api from '@/api/index'

const value = ref('')
const parentDisable = ref(false)

const props = defineProps({  // 可以拿到它的值
  recordId: Number,
})
//此处必须用toRefs，否则将失去响应式
const { recordId } = toRefs(props);

// form表单相关
const showEl = ref(false)

const formSize = ref('default')

const emperorFormRef = ref<FormInstance>()
const emperorForm = reactive<Emperor>({
  id: undefined,
  name: '',
  dynasty: '',
  dynastyTitle: '',
  reignTitle: '',
  mausoleum: '',
  dateOfBirth: undefined,
  dateOfDeath: undefined,
  introduction: '',
})
// 判断recordId是否为空，为空新增，不为空编辑
const getRecord = () => {
  if(recordId?.value != undefined){
    const parms = axios.get<Emperor>(api.emperor+"/"+recordId?.value);
    parms.then((res)=>{
      // console.log(res.data);
      emperorForm.id = res.data?.id
      emperorForm.name = res.data?.name? res.data?.name:''
      emperorForm.dynasty = res.data?.dynasty? res.data?.dynasty:''
      emperorForm.dynastyTitle = res.data?.dynastyTitle? res.data?.dynastyTitle:''
      emperorForm.reignTitle = res.data?.reignTitle? res.data?.reignTitle:''
      emperorForm.mausoleum = res.data?.mausoleum? res.data?.mausoleum:''
      emperorForm.dateOfBirth = res.data?.dateOfBirth
      emperorForm.dateOfDeath = res.data?.dateOfDeath
      emperorForm.introduction = res.data?.introduction? res.data?.introduction:''
    });
  }
}
getRecord();

const rules = reactive<FormRules<Emperor>>({
  name: [
    { required: true, message: '请录入名字', trigger: 'blur' },
    { min: 1, max: 255, message: '名字', trigger: 'blur' },
  ],
  dynasty: [
    { required: true, message: '请录入朝代', trigger: 'blur' },
    { min: 1, max: 255, message: '朝代', trigger: 'blur' },
  ],
  dynastyTitle: [
    { required: true, message: '请录入庙号', trigger: 'blur' },
    { min: 1, max: 255, message: '庙号', trigger: 'blur' },
  ],
  reignTitle: [
    { required: true, message: '请录入年号', trigger: 'blur' },
    { min: 1, max: 255, message: '年号', trigger: 'blur' },
  ],
  mausoleum: [
    { required: true, message: '请录入陵墓', trigger: 'blur' },
    { min: 1, max: 255, message: '陵墓', trigger: 'blur' },
  ],
  dateOfBirth: [
    { required: true, message: '请录入出生年份', trigger: 'blur' },
    { min: 1, max: 255, message: '出生年份 0 to 2000', trigger: 'blur' },
  ],
  dateOfDeath: [
    { required: true, message: '请录入死亡年份', trigger: 'blur' },
    { min: 1, max: 255, message: '死亡年份 0 to 2000', trigger: 'blur' },
  ],
  introduction: [
    { required: true, message: '请录入简介', trigger: 'blur' },
    { min: 1, max: 2550, message: '简介长度最长2550字节', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const parms = axios.post( api.emperor,emperorForm)
      parms.then((res)=>{
        if(res.msg == "success"){
          ElMessage({
            message: '提交成功.',
            type: 'success',
          })
          resetForm(formEl)
          refresh();
        }else {
          ElMessage.error('提交失败.')
        }
      });
    } else {
      console.log('error submit!', fields)
      ElMessage.error('校验失败.')
    }
  })
}
// 关闭当前弹框
const emit = defineEmits(["changeMsg","refreshTable"]);
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  emit('changeMsg');
}
// 刷新父组件中的list数据
function refresh(){
  emit('refreshTable');
}

</script>